<template>
  <el-card shadow="never" class="mt-8px">
    <template #header>
      <div class="h-3 flex justify-between items-center">
        <div class="header-title">
          <span>涉及人员</span>
          <el-button
            type="primary"
            link
            size="small"
            @click="$emit('add-person')"
            class="add-btn"
          >
            <Icon icon="ep:plus" class="mr-1" />
            添加
          </el-button>
        </div>
        <el-pagination
          small
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="$emit('page-change', $event)"
          :pager-count="5"
          class="person-pagination"
        />
      </div>
    </template>
    <el-skeleton :loading="loading" animated>
      <el-row>
        <el-col
          v-for="(item, index) in list"
          :key="`card-${item.id || index}`"
          :xl="8"
          :lg="8"
          :md="8"
          :sm="24"
          :xs="24"
        >
          <el-card shadow="hover" class="mr-5px mt-5px relative">
            <!-- 右上角徽标 -->
            <div class="absolute right-10px top-10px flex space-x-2">
              <el-badge :value="item.unreadWarn" title="未读预警数量" type="danger" class="custom-badge" />
              <el-badge :value="item.totalWarn" title="总预警数量" type="info" class="custom-badge" />
            </div>
            <div class="flex items-center">
              <img :src="item.avatar" style="width: 40px" alt="用户头像"/>
              <span class="text-16px ml-4">{{ item.name }}</span>
              <!-- 群组标签 -->
              <div v-if="item.groupName" class="ml-4 text-13px bg-blue-50 text-blue-600 px-3 py-1.5 rounded-full shadow-sm border border-blue-100">
                {{item.groupName}}
              </div>
            </div>
            <div class="mt-12px flex justify-between text-12px text-gray-400">
              <span>{{item.lastLocation}}</span>
              <span>{{ formatTime(item.lastLocationTime, 'yyyy-MM-dd') }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-skeleton>
  </el-card>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
import { formatTime } from '@/utils'
import Icon from '@/components/Icon/src/Icon.vue' // 假设你有这个Icon组件

// 定义人员信息类型
interface PersonCaseInfo {
  id?: number
  avatar: string
  name: string
  groupName?: string
  unreadWarn: number
  totalWarn: number
  lastLocation: string
  lastLocationTime: string | Date
}

// 定义props
const props = defineProps<{
  loading: boolean
  list: PersonCaseInfo[]
  total: number
  pageSize: number
  currentPage: number
}>()

// 定义事件
const emit = defineEmits<{
  (e: 'page-change', page: number): void
  (e: 'add-person'): void
}>()
</script>

<style lang="scss" scoped>
.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.add-btn {
  padding: 0 12px;
  height: 28px;
  font-size: 14px;
  border-radius: 4px;
  background-color: #f5f5f5;
}

:deep(.person-pagination) {
  .el-pager {
    li {
      width: 24px;
      height: 24px;
      line-height: 24px;
      border-radius: 50%;
      margin: 0 4px;

      &.active {
        background: var(--el-color-primary);
        color: white;
      }

      &:hover {
        background: var(--el-color-primary-light-9);
      }
    }
  }

  .btn-prev,
  .btn-next {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    padding: 0;
    min-width: auto;

    &:hover {
      background: var(--el-color-primary-light-9);
    }
  }
}
</style>
